<template>
    <div class="main-box">
        <!-- 笔记卡片 -->
        <div class="main-right">
            <ArticleCard />
        </div>
        <aside class="main-left">
            <!-- 个人卡片 -->
            <BlogerCard />
            <!-- 分类导航 -->
            <ClassNav />
        </aside>
    </div>
</template>

<script setup>
import ArticleCard from './ArticleCard.vue';
import BlogerCard from './BlogerCard.vue';
import ClassNav from './ClassNav.vue'

</script>

<style lang="scss" scoped>
.main-box {
    display: flex;
    justify-content: center;
    .main-right {
        flex: 1;
        max-width: 780px;
    }
    .main-left {
        margin-top: 20px;
        box-sizing: border-box;
        margin-left: 16px;
    }
}
</style>